<template>
    <div class="news-box">
        <el-tabs v-model="activeName" type="card" class="custom-menu" @tab-click="handleClick">
      <el-tab-pane label="热点时事" name="first" class="custom-menu-item">
        <div class="transparent-box">
          <div class="news-little-box" v-for="(card, index) in cards" :key="index">
            <TextEllipsis text="这是一个很长的文本，超过限定字数后会变成省略号,不信你可以试一试。" :maxLength="30" class="news_text" />
          </div>  
        </div>
      </el-tab-pane>
      <el-tab-pane label="新闻速递" name="second" class="custom-menu-item">
        <div class="transparent-box">
          <div class="news-little-box" v-for="(card, index) in cards" :key="index">
            <TextEllipsis text="超过限定字数后会变成省略号，这是一个很长的文本。" :maxLength="30" class="news_text" />
          </div>  
        </div>
      </el-tab-pane>
    </el-tabs>
    </div>
  </template>

<script lang="ts">
  import { ref } from 'vue'
  import type { TabsPaneContext } from 'element-plus'
  import TextEllipsis from './TextEllipsis.vue';
  const activeName = ref('first')
  
  const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
  };
  export default {
  components: {
    TextEllipsis
  },
  data() {
      return {
        // 模拟生成一些卡片数据
        cards: Array.from({ length: 4 }, (v, i) => ({
          
        }))
      };
    }
};
</script>

<style scoped>
.news-box {
  width: 800px;
  height: 300px;
  background: rgb(243, 245, 243);
  margin-left: 50px;
  border-radius: 20px;  
  /* 过渡效果（可选），用于鼠标悬停等交互 */  
  transition: all 0.3s ease;
  display: flex;  
  align-items: center; /* 垂直居中（这里可能不需要，因为我们只想要水平居中） */  
  flex-direction: column; /* 改为列方向布局，以便后续调整 tabs 的位置 */  
  padding-top: 15px; /* 根据需要调整，为 tabs 留出空间 */
}
.news-box:hover {  
  background-color: #79d7c6;  
  transform: translateY(-5px); /* 稍微向上移动 */  
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* 加深阴影 */  
}
.custom-menu {
  backgroundColor: rgba(255, 254, 254, 0.5);
  border-bottom: none; /* 去掉底部边框 */
  width: 95%;
  /* display: flex;
  justify-content: center; */
}
.transparent-box {  
  width: 100%; /* 设置盒子的宽度 */  
  height: 220px; /* 设置盒子的高度 */  
  background-color: rgba(0, 0, 0, 0); /* 使用RGBA设置透明背景 */  
  border: 1px solid white; /* 设置黑色边框 */    
  padding: 10px;  
  /* 可选的：设置盒子的显示方式，比如块级元素（默认） */  
  display: block;    
  /* text-align: center;     */
  color: black; /* 或者使用更对比鲜明的颜色，如白色 */  
}
.news-little-box {
  width: 100%;
  height: 50px;
  /* background-color: white; */
  border-bottom: 1px solid black; /* 只设置下边框为1px宽的黑色实线 */
  padding: 15px;
  font-size: 16px;
}
.news_text {

}
</style>